<script setup>
	import {
		ref
	} from 'vue';
	import noavatarSmall from "../assets/userlist/noavatar_small.gif";
	import avatar75 from "../assets/userlist/75_avatar_small.jpg";
	import avatar89 from "../assets/userlist/89_avatar_small.jpg";

	const users = ref([{
			"name": "smyhvae",
			"icon": noavatarSmall
		},
		{
			"name": "smyh",
			"icon": noavatarSmall
		},
		{
			"name": "smyh02",
			"icon": avatar75
		},
		{
			"name": "vae",
			"icon": avatar89
		},
		{
			"name": "today",
			"icon": noavatarSmall
		},
		{
			"name": "enen",
			"icon": noavatarSmall
		},
		{
			"name": "oyey",
			"icon": noavatarSmall
		},
		{
			"name": "dongxiaojie",
			"icon": noavatarSmall
		},
		{
			"name": "qishi",
			"icon": noavatarSmall
		},
		{
			"name": "qqtang",
			"icon": noavatarSmall
		},
		{
			"name": "wawawa",
			"icon": noavatarSmall
		},
		{
			"name": "haha",
			"icon": noavatarSmall
		},
		{
			"name": "robot",
			"icon": noavatarSmall
		},
		{
			"name": "heheda",
			"icon": noavatarSmall
		},
		{
			"name": "smyhvae1",
			"icon": noavatarSmall
		},
		{
			"name": "lihaile",
			"icon": noavatarSmall
		}
	])
</script>

<template>

	<div class="wp mtn">
		<div class="xfs xfs_2 frame">
			<div class="title frame-title"><span class="titletext">当前在线用户</span></div>
			<div class="block">
				<div class="ml mls">
					<ul>
						<li v-for="item in users">
							<a href="#" target="_blank">
								<img :src="item.icon" width="48px" height="48px" :alt="item.name"/>
							</a>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
	* {
		word-wrap: break-word;
	}

	.wp {
		width: 730px;
		margin: 0px auto;
	}

	.mtn {
		margin-top: 5px !important;
	}

	#ct .frame {
		margin: 0;
		border: none;
	}

	.xfs_2 .frame-title,
	.xfs_2 .frametitle,
	.xfs_2 .tab-title {
		background-color: #A90000;
		background-position: 0 -99px;
	}

	.xfs .frame-title,
	.xfs .frametitle,
	.xfs .tab-title,
	.xfs .frame-title a,
	.xfs .frametitle a,
	.xfs .tab-title a {
		color: #FFF !important;
	}

	.xfs .frame-title,
	.xfs .frametitle,
	.xfs .tab-title {
		border: none;
		background: transparent url(images/mu.png) repeat-x 0 95;
	}

	.title {
		padding: 0 10px;
		height: 32px;
		font-size: 14px;
		font-weight: 700;
		line-height: 32px;
		overflow: hidden;
	}

	.block {
		margin: 10px 10px 0;
	}

	ul,
	menu,
	dir {
		display: block;
		list-style: none;
		-webkit-margin-before: 1em;
		-webkit-margin-after: 1em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		-webkit-padding-start: 25px;
	}

	.mls li {
		padding: 0 0 5px;
		width: 66px;
		height: 85px;
	}

	.ml li {
		float: left;
		text-align: center;
		overflow: hidden;
	}

	a {
		color: #333;
		text-decoration: none;
		font: 12px/1.5 Tahoma, 'Microsoft Yahei', 'Simsun';
	}

	.mls p {
		margin-top: 5px;
	}

	.ml p,
	.ml span {
		display: block;
		width: 100%;
		height: 20px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.mls img {
		width: 48px;
		height: 48px;
	}

	.ml img {
		display: block;
		margin: 0 auto;
	}

	a img {
		border: none;
	}
</style>